<template>
  <div className="app-container">
    <div className="table-container">
      <base-list
        ref="table"
        url="/book_type"
        :options="options"
        :columns="columns"
        :format="format"
        :rules="rules"
        show-select
        permission="ADMIN"
        @selectChange="tableSelectChange"
        @reloadOptions="handleGetOptions"
      >
        <template slot="header_actions" slot-scope="scope">
          <el-button v-waves type="danger" class="filter-button" icon="el-icon-finished" @click="mergeRootId()">合并</el-button>
        </template>
      </base-list>
    </div>
    <el-dialog title="归拢" :visible.sync="dialogMergeFormVisible">
      <el-form :model="mergeForm">
        <el-form-item label="数据" label-width="auto">
          <el-select v-model="mergeForm.rootId" placeholder="请选择数据">
            <el-option v-for="(item, index) in multipleSelection" :key="index" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="mergeLoading" @click="dialogMergeFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="mergeLoading" @click="mergeConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getBaseList, getBaseOptions, requestBase} from '@/api/common'
import BaseList from '@/components/BaseList/index.vue'

export default {
  name: 'BookType',
  components: {BaseList},
  data() {
    return {
      columns: [
        {show: true, edit: false, width: '100', key: 'id', fixed: true, label: 'ID', tooltip: 'ID', type: 'NUMBER', queryable: true, sortable: true},
        {show: true, edit: true, width: 'auto',minWidth: '300', key: 'name', label: '类型名称', tooltip: '类型名称', type: 'WORD', queryable: true, sortable: true},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createTime', label: '创建时间', tooltip: '创建时间', type: 'DATE_TIME'},
        {show: true, edit: false, width: 'auto',minWidth: '200', key: 'updateTime', label: '更新时间', tooltip: '更新时间', type: 'DATE_TIME', queryable: true},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createUser', label: '创建人', tooltip: '创建人', type: 'WORD'},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'updateUser', label: '修改人', tooltip: '修改人', type: 'WORD'},
      ],
      format: {
        createUser: (data, index) => {
          return data.createUser ? data.createUser.nickName + '('+data.createUser.id+')' : ''
        },
        updateUser: (data, index) => {
          return data.updateUser ? data.updateUser.nickName + '('+data.updateUser.id+')' : ''
        }
      },
      rules: {
        add: {
          name: [{required: true, message: '类型名称必填!', trigger: 'blur'}],

        },
        edit: {
          id: [{required: true, message: '请选择数据!', trigger: 'change'}],
          name: [{required: true, message: '类型名称必填!', trigger: 'blur'}],

        }
      },
      options: {
      },
      multipleSelection: [],
      dialogMergeFormVisible: false,
      mergeForm: {
        rootId: null
      },
      mergeLoading: false
    }
  },

  created() {
    this.handleGetOptions()
  },
  mounted() {
  },
  methods: {
    mergeRootId() {
      if (!this.multipleSelection) {
        this.$notify.error('请选择数据!')
        return
      }
      this.mergeForm.rootId = null
      this.dialogMergeFormVisible = true
    },
    mergeConfirm() {
      if (!this.mergeForm.rootId) {
        this.$notify.error('请选择数据!')
        return
      }
      this.mergeLoading = true
      requestBase({ url: '/book_type/merge', method: 'POST', data: {
          ids: this.multipleSelection.map(e => e.id),
          rootId: this.mergeForm.rootId
        }}).then(res => {
        this.$refs.table.fetchData()
        this.dialogMergeFormVisible = false
        this.mergeLoading = false
        this.$notify.success('合并成功!')
      }).catch(e => {
        this.mergeLoading = false
      })
    },
    tableSelectChange(val) {
      this.multipleSelection = val
    },
    handleGetOptions() {
      const options = JSON.parse(localStorage.getItem('allOptions'))
      if (options) {
        this.options = Object.assign(this.options, options)
      }
    }
  }
}
</script>


